<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2023-08-11 09:06:57
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-23 11:28:31
 * @FilePath: \jzjypc4.2\src\components\yuyueBox\yuyuebox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yuyueevm">
      <el-dialog  :visible.sync="dialogVisible" :before-close="handleClose" :width="xzMsg.is_qw === 0?'800px':'560px'" top="30vh">
        <div class="yyevmContent" :style="{width:xzMsg.is_qw === 1?'560px':'800px'}">
          <div class="top" v-if="xzMsg.is_qw === 1">
            <img src="../../assets/img/activeNew/duigou.png" alt="">
            <h4>
                您的资源下载成功啦 !
            </h4>
          </div>
          <div class="top1" v-if="xzMsg.is_qw != 1">
            <img src="../../assets/img/activeNew/duigou.png" alt="">
            <h4>
                您的资源下载成功啦 !
            </h4>
          </div>
          <div class="content">
            <div class="evm" v-if="xzMsg.is_qw === 0">
              <h4>想解锁更多VIP优质资源 扫一扫添加客服体验吧！</h4>
              <div class="pic">
                <img :src="zykf_file_url" alt="" />
              </div>
            </div>
            <div class="right" :style="{marginLeft:xzMsg.is_qw === 1?'60px':'40px'}">
              <div class="bao">
                <p v-if="xzMsg.baotype != 0">一键获取</p>
                <!-- 下载免费资源（非试卷、课件）及付费试卷 及付费课件 成功后-->
                <h2 v-if="xzMsg.baotype == 1">高中全学年完整教学包</h2>
                <!-- 下载免费试卷 -->
                <h2 v-if="xzMsg.baotype == 2">高中全学年精选试卷</h2>
                <!-- 下载免费课件 -->
                <h2 v-if="xzMsg.baotype == 3">高中全学年同步原创课件</h2>
                <!-- 已购买尊享包的 -->
                <h4 v-if="xzMsg.baotype == 0 && xzMsg.kemu_id == 1">高中语文经典教辅，样书一键申请</h4>
                <h4 v-if="xzMsg.baotype == 0 && xzMsg.kemu_id == 3">高中英语经典教辅系列图书</h4>
                <img src="../../assets/img/lijichakan.gif" @click="yijian" alt="" v-show="!(xzMsg.baotype == 0 && xzMsg.kemu_id == 3)">
              </div>
              <p style="margin-top: 20px;" v-if="xzMsg.baotype == 0 && xzMsg.kemu_id == 3">听力、阅读理解、高分写作……</p>
              <div class="bao" style="margin:10px 0 20px 0;" v-if="xzMsg.baotype == 0 && xzMsg.kemu_id == 3">
                <h4>样书一键申请</h4><img src="../../assets/img/lijichakan.gif" @click="yijian" alt="">
              </div>
              <div class="msg" @click="yijian" v-if="xzMsg.baotype == 1">
                <div class="list" style="margin-top:22px"><span>教</span> <p>同步原创教学课件、精编精校教案、学案</p></div>
                <div class="list"><span>学</span> <p>一线教学专家同步教研课、专家同步教学课</p></div>
                <div class="list"><span>练</span> <p>开学摸底卷、月考卷、期中期末卷、精品同步 练习、单元检测卷</p></div>
                <div class="list"><span>精</span> <p>每个资源和课程都经过瑞鑫教研团队及一线专 家潜心打磨，层层审校</p></div>
              </div>
              <div class="msg" @click="yijian" v-if="xzMsg.baotype == 2">
                <div class="list" style="margin-top:22px"><span>教</span> <p>开学摸底卷</p></div>
                <div class="list"><span>学</span> <p>同步月考卷</p></div>
                <div class="list"><span>练</span> <p>期中、期末试卷 练习、单元检测卷</p></div>
                <div class="list"><span>精</span> <p>一模、二模、冲刺卷</p></div>
                <div class="list"><span>精</span> <p>高考真题卷</p></div>
              </div>
              <div class="msg wenzi" @click="yijian" v-if="xzMsg.baotype == 3">
                <div class="list" style="margin-top:22px"> <p style="width:380px"> <span>高一、高二</span> 同步原创教学课件（包含教材所有课程</p></div>
                <div class="list"> <p style="width:380px"> <span>高三</span> 一轮复习专题课件、二轮复习专题课件、考前指导等同步课件</p></div>
              </div>
              <div class="msg wenzi" @click="yijian" v-if="xzMsg.baotype == 0 && xzMsg.kemu_id == 1">
                <div class="list" style="margin-top:22px"> <p style="width:380px"> <span >经典爆款</span> 《新课标必背古诗文72篇 精析仿练》</p></div>
                <div class="list"> <p style="width:388px">  <span>人手一本</span> 《高中语文全面知识清单》</p></div>
                <div class="list"> <p style="width:388px"> <span>阅读利器</span> 《高中语文阅读新思路——建构与提升》</p></div>
                <div class="list"> <p style="width:388px"> <span>高分作文</span> 《高分作文技法突破》</p></div>
                <div class="list"> <p style="width:388px"> <span>直通高考</span> 《高考真题精析仿练》</p></div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  props:['zykf_file_url','xzMsg'],
  inject: ["reload"],
    data(){
        return{
          dialogVisible:true,
          dqkfevm:'',//公众号二维码
          width:'560px',
          right_left:'60px'
        }
    },
    created(){
      console.log(this.xzMsg)
      
    },
    methods:{
      handleClose(){
        this.$emit('qwtcClose')
      },
      yijian(){
        console.log(this.xzMsg)
        const xzMsg = this.xzMsg
        if(xzMsg.baotype == 1){
          this.$router.push({
            name: "Dingzhi",
            query: {
              kemu_id:this.xzMsg.kemu_id,
              type:'dy',
              gopay:1,
              leixing:3,
              nianji_id:xzMsg.nianji_id
            },
          });
        }else if(xzMsg.baotype == 2){
          this.$router.push({
            name: "Dingzhi",
            query: {
              kemu_id:this.xzMsg.kemu_id,
              type:'dy',
              gopay:1,
              leixing:1,
              nianji_id:xzMsg.nianji_id
            },
          });
        }else if(xzMsg.baotype == 3){
          this.$router.push({
            name: "Dingzhi",
            query: {
              kemu_id:this.xzMsg.kemu_id,
              type:'dy',
              gopay:1,
              leixing:2,
              nianji_id:xzMsg.nianji_id
            },
          });
        }else if(xzMsg.baotype == 0){
          this.$router.push({
            path: "/product",
          });
        }
      },
    },
}
</script>

<style lang="less" scoped>
    .yuyueevm {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog {
      margin-top: 13vh !important;
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
      // height: 450px;
      height: 100%!important;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close{
        color: #FFF !important;
    }
    .yyevmContent {
      // width: 560px;
      // height: 500px;
      border-radius: 20px;
      .top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 120px;
        border-radius: 20px 20px 0px 0px;
        background-image: url('../../assets/img/bmsbg.png');
        background-size: 100%;
        background-repeat: no-repeat;
        user-select: none;
        img{
            // margin-right: 10px;
            width: 40px;
        }
        h4{
          margin-left: 10px;
          font-size: 20px;
          color: #fff;
          text-align: center;
          line-height: 120px;
        }
      }
      .top1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 120px;
        border-radius: 20px 20px 0px 0px;
        background-image: url('../../assets/img/800px.png');
        background-size: 100%;
        background-repeat: no-repeat;
        user-select: none;
        img{
            // margin-right: 10px;
            width: 40px;
        }
        h4{
          margin-left: 10px;
          font-size: 20px;
          color: #fff;
          text-align: center;
          line-height: 120px;
        }
      }
      .content{
        display: flex;
        .evm{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 30px;
          margin-left: 40px;
          padding-right: 40px;
          border-right: 1px solid #E6E6E6;
          height: 320px;
          h4{
            font-size: 18px;
            color: #333;
            width: 200px;
          }
          .pic{
            margin-top: 32px;
            width: 202px;
            height: 202px;
            // border: 1px solid #ccc;
            img{
              width: 100%;
            }
          }
        }
        .bao{
          display: flex;
          align-items: center;
          margin-top: 30px;
          p{
            // margin-left: 60px;
            font-size: 16px;
            color: #333;
          }
          h2{
            font-size: 24px;
            margin-left: 18px;
            margin-right: 20px;
            color: #08A579;
          }
          h4{
            font-size: 20px;
            color: #333;
            margin-right: 15px;
          }
          img{
            position: relative;
            top: 4px;
            width: 120px;
            cursor: pointer;
            user-select: none;
          }  
          img:active{
            opacity: .8;
          }
        }
        .yymsg{
          display: flex;
          margin: 20px 0;
          // flex-direction: column;
        }
        .msg{
          margin-top: 25px;
          // margin-left: 60px;
          width: 432px;
          // height: 250px;
          border: 4px solid #08A579;
          border-radius: 12px;
          background: #F5FAF8;
          margin-bottom: 30px;
          cursor: pointer;
          .list{
            display: flex;
            margin-bottom: 24px;
            margin-left: 28px;
            span{
              display: inline-block;
              text-align: center;
              margin-right: 10px;
              line-height: 24px;
              width: 24px;
              height: 24px;
              background: linear-gradient(150deg, #08A579, #C4F255);
              border-radius: 4px;
              color: #FFF;
              font-size: 20px;
              font-weight: 600;
              font-family: fangsong;
            }
            p{
              width: 320px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              color: #333333;
              line-height: 24px;
            }
          }
        }
        .wenzi{
          .list{
            span{
              width: auto;padding: 2px 6px;font-size: 17px;
            }
          }
          
        }
      }
      .signSuccessContent {
        overflow: hidden;
        .pic {
          margin: 0 auto;
          margin-bottom: 20px;
          width: 160px;
          height: 160px;
          border: 1px solid #dedede;
          img {
            width: 160px;
            height: 160px;
          }
        }
        p {
          text-align: center;
          width: 270px;
          margin: 0 auto;
          margin-bottom: 15px;
          text-align: center;
          font-size: 14px;
          color: #969799;
        }
      }
    }
  }
</style>